<template>
  <div class="info_bg">
    <!-- 新闻公告 2018/2/20 0:20 zhangQ -->
    <div class="transportInfo" id="newsBulletin">
      <div class="wrap">
        <div>
          <h1>新闻公告</h1>
          <p>NEWS BULLETIN</p>
        </div>
        <div class="newShow">
          <div class="newList">
            <ul>
              <li v-model='newsIndex' :class="newsIndex==i?'active':''" v-for="(item,i) in newList"
                  @click="checkNews(i)" :id='i'><span class="icon">●</span><span
                class="nlTitle">{{item.title}}</span><span
                class="time">{{newListTime[i]}}</span></li>
            </ul>
          </div>
          <div class="newCentent">
            <div class="news">
              <div class="artcleImg" v-if="allNewContentImg[newsIndex]==''">
                <img :src="imgDefault" width="200" alt="">
              </div>
              <div class="artcleImg" v-html="allNewContentImg[newsIndex]" v-if="allNewContentImg[newsIndex]!=''">
              </div>
              <h3 class="artcleHeader">{{allNewContentTitle[newsIndex]}}</h3>
              <p class="artcleCentent" v-for="item in allNewContentP[newsIndex]">{{item}}</p>
            </div>
            <!--<div class="news">
              <h3 class="artcleHeader">{{newList[0].title}}</h3>
              <div v-html="newList[0].content" class="resultNews"></div>
            </div>-->
            <div class="artcleFooter">
              <span class="artcleTime"><Icon type="android-time"></Icon>{{allNewContentTime[newsIndex]}}</span>
              <span class="artcleFrom"><i>&copy;</i>本文来源：{{allNewContentFrom[newsIndex]}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {getAllList} from '@api/frontEnd'
  import imgDefault from '@static/img/img_default.png'
  import moment from 'moment'

  export default {
    name: 'newsBulletin',
    data () {
      let newsIndex = 0
      let newList = []
      let allNewContentImg = []
      let allNewContentTitle = []
      let allNewContentP = []
      let allNewContentTime = []
      let allNewContentFrom = []
      let newListTime = []
      let datas = {
        newsIndex,
        newList,
        allNewContentImg,
        allNewContentTitle,
        allNewContentP,
        allNewContentTime,
        allNewContentFrom,
        newListTime,
        imgDefault
      }
      return datas
    },
    methods: {
      loadNewList () {
        let page = 1
        let pageSize = 9
        let typeId = '1'
        let like = ''
        let param = {page, pageSize, typeId, like}
        getAllList(param).then(res => {
          if (res.data.isSuccess === 1) {
            let resultData = res.data.data
            this.newList = resultData
            let newListTime = []
            let allNewContentImg = []
            let allNewContentP = []
            let allNewContentTitle = []
            let allNewContentTime = []
            let allNewContentFrom = []
            for (let i = 0; i < resultData.length; i++) {
              let thisDateTimeToday = moment(moment().add(1, 'days').format('YYYY-MM-DD') + ' 00:00:00')
              let sjd = (thisDateTimeToday - moment(resultData[i].time)) / 1000
              // let sjd = (moment() - moment(resultData[i].time)) / 1000
              let years = moment.duration({seconds: sjd}).years()
              let months = moment.duration({seconds: sjd}).months()
              let days = moment.duration({seconds: sjd}).days()
              let hours = moment.duration({seconds: sjd}).hours()
              let minutes = moment.duration({seconds: sjd}).minutes()
              let seconds = moment.duration({seconds: sjd}).seconds()
              let thisTime = ''
              if (years > 0) {
                thisTime = years + '年前'
              } else if (months > 0 && months < 12) {
                thisTime = months + '月前'
              } else if (days > 0 && days <= 30) {
                thisTime = days + '天前'
                if (+days === 1) {
                  thisTime = '昨天'
                } else if (+days === 2) {
                  thisTime = '前天'
                }
              } else if (hours > 0 && hours < 24) {
                thisTime = '今天'
              } else if (minutes > 0 && minutes < 60) {
                thisTime = '今天'
              } else if (seconds > 0 && seconds < 60) {
                thisTime = '今天'
              }
              newListTime.push(thisTime)
              let thisContent = resultData[i].content.split(/(?!<img.+?>)<.+?>/) // 去掉除了img的标签并形成数组
              let p = []
              let img = []
              for (let i = 0; i < thisContent.length; i++) {
                let k = thisContent[i].trim()
                if (k) {
                  if (k.indexOf('img') > 0) {
                    img.push(k)
                  } else {
                    let nonbsp = k.replace(/&nbsp;/ig, '')
                    let noemsp = nonbsp.replace(/&emsp;/ig, '')
                    p.push(noemsp)
                    // p.push(k)
                  }
                }
              }// 去空 分段 图片;
              if (img.length > 0) {
                allNewContentImg.push(img[0])
                // allNewContentImg.push('')
                allNewContentP.push(p)
              } else {
                allNewContentImg.push('')
                allNewContentP.push(p)
              }
              allNewContentTitle.push(resultData[i].title)
              allNewContentTime.push(resultData[i].time)
              allNewContentFrom.push(resultData[i].author)
            }
            this.allNewContentImg = allNewContentImg
            this.allNewContentP = allNewContentP
            this.newListTime = newListTime
            this.allNewContentTitle = allNewContentTitle
            this.allNewContentTime = allNewContentTime
            this.allNewContentFrom = allNewContentFrom
          } else {
            this.newList = []
          }
        })
      },
      checkNews (id) {
        this.newsIndex = id
      }
    },
    mounted () {
      this.loadNewList()
    }
  }
</script>
<style scoped>
  .info_bg {
    background-image: url("../../../../../static/img/img_homebg01.png");
    background-color: #FFFFFF;
    padding-bottom: 20px;
    padding-top: 80px;
  }

  .transportInfo {
    height: 100%;
    margin: 0 auto;
    width: 960px;
  }

  .newShow {
    width: 960px;
    height: 340px;
    margin-top: 30px;
  }

  .newShow .newList {
    width: 320px;
    float: left;
    height: 330px;
  }

  .newShow .newList ul {
    width: 320px;
    background-color: #fff;
  }

  .newShow .newList ul li {
    width: 320px;
    height: 36px;
    border-bottom: 1px solid #f5f5f5;
    border-left: 2px solid transparent;
    background-color: #fff;
    position: relative;
    cursor: pointer;
  }

  .newShow .newList ul li .nlTitle {
    position: absolute;
    display: block;
    width: 240px;
    overflow: hidden;
    line-height: 36px;
    height: 36px;
    color: #111;
    font-size: 14px;
    top: 0;
    left: 14px;
  }

  .newShow .newList ul li .icon {
    position: absolute;
    display: block;
    width: 14px;
    text-align: center;
    line-height: 36px;
    color: #d8d8d8;
    font-size: 11px;
    top: 0;
    left: 0
  }

  .newShow .newList ul li .time {
    position: absolute;
    display: block;
    line-height: 37px;
    height: 35px;
    width: 60px;
    font-size: 11px;
    top: 0;
    left: 254px;
    text-align: left;
    overflow: hidden;
    color: #888;
  }

  .newShow .newList ul .active, .newShow .newList ul li:hover {
    border-left-color: #FECA2E;
    box-shadow: 0px -3px 12px 0px rgba(199, 199, 199, 0.31), /*上边阴影*/ 0 0px 0px 0px transparent, /*左边阴影*/ 0 0px 0px 0px transparent, /*右边阴影*/ 0px 3px 12px 0px rgba(199, 199, 199, 0.31); /*下边阴影*/
    position: relative;
    z-index: 200;
  }

  .newShow .newList ul .active .time, .newShow .newList ul li:hover .time {
    width: 60px;
    z-index: 300;
    text-align: left;
    width: 80px;
    background-color: #fff;
  }

  .newCentent {
    float: left;
    width: 640px;
    height: 340px;
    box-shadow: 0 -3px 12px 0 rgba(199, 199, 199, 0.31);
    background-color: #fff;
    overflow: hidden;
    padding: 20px 20px 0 20px;
    position: relative;
    z-index: 200px;
  }

  .artcleImg {
    float: right;
    margin: 10px 0 5px 5px;
  }

  .artcleImg img {
    width: 200px;
  }

  .newCentent .artcleHeader {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .newCentent .artcleCentent {
    font-size: 12px;
    line-height: 20px;
    text-indent: 2em;
  }

  .news {
    height: 280px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .artcleFooter {
    height: 40px;
  }

  .artcleTime, .artcleFrom {
    display: inline-block;
    line-height: 40px;
    font-size: 12px;
    color: #aaa;
  }

  .artcleFrom {
    margin-left: 10px;
  }

  .artcleTime i, .artcleFrom i {
    margin-right: 5px;
  }
</style>

<style>
  #newsBulletin .news::-webkit-scrollbar { /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
  }

  #newsBulletin .news::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(204, 204, 204, 0.7);
    background: rgba(204, 204, 204, 0.1);
  }

  #newsBulletin .news::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(204, 204, 204, 0.1);
    border-radius: 0;
    background: rgba(204, 204, 204, 0.1);
  }
</style>
